<template>
    <Modal
        :title="title"
        :value="show"
        @on-visible-change="setVisibility">

        <div class="margin-top-20" v-if="ticket">
            <Row :gutter="10" class="margin-bottom-20">
                <i-col span="5" class="text-right">工单编号：</i-col>
                <i-col span="18">{{ticket.ticket_sn}}</i-col>
            </Row>

            <Row :gutter="10" class="margin-bottom-20">
                <i-col span="5" class="text-right">房源地址：</i-col>
                <i-col span="18">{{concatLocation(ticket.home_info)}}</i-col>
            </Row>

            <Row :gutter="10" class="margin-bottom-20">
                <i-col span="5" class="text-right">提交时间：</i-col>
                <i-col span="18">{{ticket.submit_time | date}}</i-col>
            </Row>

            <Row :gutter="10" class="margin-bottom-20">
                <i-col span="5" class="text-right">备注：</i-col>
                <i-col span="18">
                    <i-input type="textarea" :rows="3" v-model="description"></i-input>
                </i-col>
            </Row>

        </div>
        <Row slot="footer">
            <Button type="text" @click="setVisibility(false)">取消</Button>
            <Button type="primary" :loading="loading" @click="handleSubmit">确定</Button>
        </Row>
    </Modal>
</template>

<script>
/**
 *  工单 - 验收
 */
import util from '@/libs/util'
import { http, api } from '@/libs/http'

export default {
  name: 'merchant-cancel-modal',
  props: {
    show: Boolean,
    ticket: Object,
    result: Boolean
  },
  data () {
    return {
      loading: false,
      description: ''
    }
  },
  computed: {
    title () {
      return this.result ? '通过验收' : '驳回验收'
    }
  },
  watch: {
    show (n) {
      if (n) {
      } else {
        this.description = ''
        setTimeout(() => {
          this.$emit('update:ticket', null)
        }, 500)
      }
    }
  },
  methods: {
    concatLocation: util.concatLocation,
    setVisibility (val) {
      this.$emit('update:show', val)
    },
    handleSubmit () {
      const data = {
        ticket_id: this.ticket.id,
        description: this.description,
        pass: this.result
      }
      this.loading = true
      http.request(this, api.ticket_check, [this.ticket.id], data, (res, err) => {
        this.loading = false
        if (err) {
          this.$Message.error('验收失败, 请重试')
          return
        }
        if (this.result) {
          this.$Message.success('该工单成功通过验收')
        } else {
          this.$Message.success('该工单已重新处理')
        }
        this.$emit('refresh')
        this.setVisibility(false)
      })
    }
  }
}
</script>